<template>
  <div class="container">
    <header>
      <a href="javascript:;" class="list-icon1" @click="jump">
        <i class="iconfont icon-up21"></i>
      </a>
      <a href="javascript:;" class="list-icon2">
        <i class="iconfont icon-kefu1"></i>
      </a>
      <h1>提交订单</h1>
    </header>
    <section>
      <div class="address-box" @click="handledz">
        <a href="javascript:;" class="list-icon3">
          <i class="iconfont icon-Frame1"></i>
        </a>
        <div class="address-info" v-for="item in addressInfo" :key="item.id">
          <p class="user-info">
            <span class="user-msg">{{item.name}}</span>
          </p>
          <p class="add-info">
            <span class="add-msg">{{item.address}}</span>
          </p>
        </div>
        <a href="javascript:;" class="list-icon4">
          <i class="iconfont icon-up11"></i>
        </a>
      </div>
      <div class="good-detail">
        <div class="good-list" v-for="(item,index) in cartList" :key="item.browse">
          <div class="good-list-pic">
            <img :src="item.cover" alt="" />
          </div>
          <div class="good-list-info">
            <p class="list-info-msg">{{item.goods_name}}</p>
            <p class="list-info-price">￥<span>{{item.sell_price}}</span></p>
          </div>
          <div class="good-list-count">
            <div class="list-count-num">
              <span 
                :class="item.num<=1?'down-disabled':''"
                @click="handleNum(index,false)"
                class="con-sub"
              >-</span>
              <span class="con-num">{{item.num}}</span>
              <span 
                :class="item.num>=6?'up-disabled':''"
                @click="handleNum(index,true)"
                class="con-add"
              >+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-time">
        <div class="list-time-msg">
          <p>配送日期:</p>
        </div>
        <div class="list-time-inp">
          <span>2021-11-09</span>
        </div>
        <a href="javascript:;" class="list-icon5">
          <i class="iconfont icon-up11"></i>
        </a>
      </div>
      <div class="list-card">
        <div class="list-time-msg">
          <p>贺卡留言:</p>
        </div>
        <div class="list-time-inp">
          <!-- <input type="text"> -->
          <span>选填</span>
        </div>
        <!-- <a href="javascript:;" class="list-icon5">
          <i class="iconfont icon-up11"></i>
        </a> -->
      </div>
      <div class="list-sale">
        <div class="list-time-msg">
          <p>优惠折扣:</p>
        </div>
        <input type="text" placeholder="请输入优惠卷码" />
      </div>

      <div class="price-info">
        <div class="price-info-dv good-price">
          <p class="good-orice-msg">商品金额:</p>
          <span class="good-price-num">￥{{allInfo.allPrice}}</span>
        </div>
        <div class="price-info-dv sale-sum">
          <p class="sale-sum-msg">优惠券:</p>
          <span class="sale-sum-num"> -￥0</span>
        </div>
        <div class="price-info-dv good-agree">
          <div class="good-agree-inp"><input type="checkbox" /></div>

          立即下单，同意
          <a href="#">《购买须知》</a>
          的服务内容
        </div>
        <div class="dd"></div>
      </div>
    </section>
    <footer>
      <div class="total">
        <p class="total-msg">应付总额:</p>
        ￥<span class="total-num">{{allInfo.allPrice}}</span>
      </div>
      <div class="list-sub">
        <span class="list-sub-msg" @click="handledd">提交订单</span>
      </div>
    </footer>
  </div>
</template>

<script>
import {Toast} from 'vant'
import { areaList } from '@vant/area-data';
export default {
  computed: {
    cartList() {
      return this.$store.state.detail.cartList
    },
    allInfo(){
      return this.$store.getters['detail/allInfo']
    },
    addressInfo() {
      return this.$store.state.address.addressInfo
    },
  },
  methods: {
    jump() {
      this.$router.push("/cart");
    },
    handledz(){
      let n = 2
      this.$router.push({path:'/addresslist',query:{n}})
    },
    handleNum(idx,boll){  //数量控制
      this.$store.commit('detail/cartNumMut',{idx,boll})
    },
    handledd(){
      Toast('支付成功')
      this.$router.push({path:'/cart'})
      this.$store.commit('detail/cartAllDel')
    }
  },
};
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
  box-sizing: border-box;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: #00bf9d;
  /* display: flex; */
}

header h1 {
  line-height: 50px;
  font-weight: normal;
  color: #fff;
  text-align: center;
  font-size: 22px;
}

header a .icon-kefu1 {
  font-size: 35px;
  color: #fff;
  position: absolute;
  /* float: right; */
  right: 0;
  margin: 10px 10px auto auto;
}

header a .icon-up21 {
  font-size: 20px;
  color: #fff;
  /* float: left; */
  position: absolute;
  left: 0;
  margin: 15px auto auto 10px;
}
section {
  color: #555555;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 50px 0 50px 0;
  /*overflow: hidden;*/
  a {
    color: #ccc;
    display: inline-block;
  }
  i {
    line-height: 60px;
    font-size: 30px;
  }
  .address-box {
    height: 60px;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background: #fff;
    color: #555;
    font-size: 14px;
    .address-info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .good-detail {
    margin-top: 10px;
    background: #fff;
    .good-list {
      padding: 5px 16px;
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #eee;
      .good-list-pic {
        width: 60px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .good-list-info {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        font-size: 14px;
        .list-info-price {
          color: #f60;
        }
        .list-info-msg {
          width: 150px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .good-list-count {
        text-align: center;
        line-height: 30px;
        display: flex;
        align-items: center;
        .list-count-num {
          display: flex;
          width: 94px;
          height: 30px;
          span {
            display: inline-block;
            width: 28px;
            height: 28px;
            border: 1px solid #ccc;
          }
          .con-sub {
            border-radius: 5px 0 0 5px;
          }
          .con-num {
            border-left: none;
            border-right: none;
          }
          .con-add {
            border-radius: 0 5px 5px 0;
          }
        }
      }
    }
  }
  .list-time {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    padding: 0px 7px;
    margin-top: 10px;
    background: #fff;
    i {
      line-height: 45px;
      font-size: 12px;
    }
    .list-time-inp {
      width: 230px;
    }
  }
  .list-card {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    padding: 0px 7px;
    background: #fff;
    border-top: 1px solid #eee;
    i {
      line-height: 45px;
      font-size: 12px;
    }
    .list-time-inp {
      width: 230px;
    }
  }
  .list-sale {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    padding: 0px 7px;
    background: #fff;
    border-top: 1px solid #eee;
    input {
      width: 272px;
      border: none;
    }
  }
  .price-info {
    color: #555555;
    margin-top: 10px;
    background: #fff;
    font-size: 14px;
    .price-info-dv {
      height: 36px;
      background: #fff;
      padding: 5px;
    }
    .good-price {
      line-height: 36px;
      display: flex;
      justify-content: space-between;
    }
    .sale-sum {
      line-height: 36px;
      display: flex;
      justify-content: space-between;
    }
    .good-agree {
      display: flex;
      text-align: left;
      line-height: 36px;
      color: #999;
      font-size: 12px;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      a {
        color: #666;
        font-size: 13px;
      }
      .good-agree-inp {
        padding: 2px 8px 0 8px;
      }
    }
  }
  .dd {
    background: #fff;
    height: 90px;
  }
}
footer {
  height: 50px;
  border-top: 1px solid #ddd;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  .total {
    display: flex;
    width: 210px;
    line-height: 50px;
    text-align: left;
    color: #f60;
    .total-msg {
      padding: 0 7px 0 7px;
      color: #000;
    }
    .total-num {
      font-size: 20px;
    }
  }
  .list-sub {
    width: 160px;
    background: #f60;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
}
</style>